<template>
  <div class="container">
    <div class="nav">
      <div class="top">
        <div @click="goback">
          <i></i>
        </div>

        <h5>收货地址</h5>

        <span @click="addlocal">新增</span>
      </div>
    </div>

    <div class="main">
      <div class="box" v-for="item in lists" :key="item.id" v-show="!haveshow" >
        <div class="left">
          <div class="content">
            <h3 v-show="item.checked">默认</h3>
            <h4>{{ item.large }}</h4>
          </div>
          <h5>{{ item.name }}<span>{{ item.phone }}</span></h5>
          <h6>
              {{ item.datail }}
          </h6>
        </div>

        <div class="right">
          <i @click="edit(item.id)"></i>
        </div>
      </div>

      <div class="box2" v-show="haveshow">
          <img src="../assets/img/ic_empty_address.png" alt="">        
          <h6>暂时还没有收货地址哦~</h6>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
import { useRouter } from 'vue-router';

export default {
  setup() {
    let goback = () =>{
      router.push({
        path:"/my"
      })
    }


    //获得传来的数据
    // 地址数据
    let router = useRouter()
    
    let lists = JSON.parse( window.localStorage.getItem("address"))
    // console.log(lists.length==0);

    //判断是否有值
    let haveshow = ref(true)
    // 如果没有这个东西或者长度为0
    if(!lists||lists.length==0){
      haveshow.value=true
      //否则现实地址数据
    }else{
      haveshow.value=false
    }

    console.log(lists);
    //新增地址跳转
    let addlocal = () =>{
     router.push({
      path:"/addaddress",
      query:{
        "num":1
      }
     })
        // router.push({path:"/addaddress",params:"1"})
    }

    //修改地址跳转
    let edit = (id) =>{
       router.push({
      path:"/addaddress",
      query:{
        "num":2,
        "id":id
      }
     })
    }
    



    return {
        lists,
        addlocal,
        edit,
        goback,
        haveshow
        
    }

  },
};
</script>

<style lang="scss" scoped>
@import url(../assets/css/base.css);
.nav {
  display: flex;
  flex-direction: column;
}
.nav .top {
  display: flex;
  margin-left: 15px;
  align-items: center;
  justify-content: space-between;
}
.nav .top i {
  background-position: 0px 11px;
  display: block;
  background-image: url(../assets/img/下载.png);
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
  background-size: 22px 22px;
}
.nav .top span {
  display: block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  color: #5f79d0;
  font-size: 19px;
}
.nav .top h5 {
  height: 48px;
  line-height: 48px;
  font-weight: bold;
  font-size: 20px;
  margin: 0px;
}

.main .left {
  display: flex;
  flex-direction: column;
}
.main .left .content{
  display: flex;
  align-items: center;
}
.main .left h3{
  width: 30px;
  margin-right: 4px;
  border-radius: 6px;
  text-align: center;
  font-weight: normal;
  font-size: 12px;
  background-color: #5467ff;
  color: #f1f2f3;
  }
.main .box {
  display: flex;
  padding-left: 35px;
  padding-right: 17px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f2f3;
}
.main .box2{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
  img{
    width: 200px;

  }
  h6{
    font-size: 15px;
    margin-top: 30px;
    color: #c4c4c4;
  }
}
.main .left h4 {
  height: 33px;
  line-height: 33px;
  font-size: 12px;
  color: #25242a;
  font-weight: normal;
}
.main .left h5 {
  height: 33px;
  line-height: 33px;
  font-size: 16px;
  color: #15220e;
  font-weight: bold;
  span{
    margin-left: 5px;
  }
}
.main .left h6 {
  height: 29px;
  line-height: 29px;
  font-size: 15px;
  color: #292732;
  font-weight: normal;
  
}
.main .right {
  width: 17px;
  height: 17px;
}
.main .right i {
  display: block;
  width: 17px;
  height: 17px;
  background-image: url(../assets/img/icon_edit_class.png);
  background-size: 17px 17px;
}
h3,
h4,
h5,
h6 {
  margin: 0px;
  
}
</style>